<template>
	<view class="page-container">
		<view class="bg-image">
			<image src="" mode="aspectFill" class="bg-img" />
			<view class="bg-overlay"></view>
		</view>
		
		<view class="content">
			<view class="header">
				<view class="header-content">
					<view class="title">沐雪缘馆</view>
					<view class="subtitle">遇见美好，邂逅缘分</view>
				</view>
				<view class="header-decoration">
					<view class="decoration-circle"></view>
					<view class="decoration-line"></view>
					<view class="decoration-circle"></view>
		    </view>
	</view>

			<view class="form-section">
				<view class="form-title">
					<text class="title-text">账号注册</text>
					<text class="title-desc">填写信息，开启你的浪漫之旅</text>
				</view>
				
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-label">姓名</view>
						<input 
							class="custom-input" 
							placeholder="请输入姓名" 
							v-model="model.userInfo.name"
							placeholder-class="input-placeholder"
						/>
					</view>
					
					<view class="input-wrapper" @tap="showSex = true; hideKeyboard()">
						<view class="input-label">性别</view>
						<view class="input-content">
							<text :class="['input-value', !model.userInfo.sex && 'placeholder']">
								{{ model.userInfo.sex || '请选择性别' }}
							</text>
							<text class="arrow-icon">></text>
						</view>
					</view>
					
					<view class="input-wrapper">
						<view class="input-label">年龄</view>
						<view class="age-container">
							<button class="age-btn" @tap="decrementAge">-</button>
							<input 
								type="number" 
								v-model="model.userInfo.age" 
								class="age-input" 
								disabled
							/>
							<button class="age-btn" @tap="incrementAge">+</button>
						</view>
					</view>
					
					<view class="input-wrapper">
						<view class="input-label">手机号</view>
						<input 
							class="custom-input" 
							placeholder="请输入手机号" 
							type="number" 
							maxlength="11"
							v-model="model.userInfo.phone"
							placeholder-class="input-placeholder"
						/>
					</view>
					
					<view class="input-wrapper verification-wrapper">
						<view class="input-label">验证码</view>
						<view class="input-content">
							<input 
								class="custom-input" 
								placeholder="请输入验证码" 
								type="number" 
								maxlength="6"
								v-model="model.userInfo.verificationCode"
								placeholder-class="input-placeholder"
							/>
							<view class="verification-btn" :class="{ 'disabled': isVerificationCodeSent }" @tap="sendVerificationCode">
								{{ isVerificationCodeSent ? verificationCountdown + 's' : '获取验证码' }}
							</view>
						</view>
					</view>

					<view class="input-wrapper">
						<view class="input-label">密码</view>
						<input 
							class="custom-input" 
							placeholder="请设置密码" 
							password
							v-model="model.userInfo.password"
							placeholder-class="input-placeholder"
						/>
					</view>
					
					<view class="input-wrapper">
						<view class="input-label">确认密码</view>
						<input 
							class="custom-input" 
							placeholder="请确认密码" 
							password
							v-model="model.userInfo.confirmPassword"
							placeholder-class="input-placeholder"
						/>
					</view>
				</view>

				<view class="agreement">
					<checkbox-group @change="handleAgreementChange">
						<label class="checkbox-label">
							<checkbox :checked="isAgreed" color="#ff69b4" />
							<text class="agreement-text">我已阅读并同意</text>
							<text class="agreement-link">《用户协议》</text>
							<text class="agreement-text">和</text>
							<text class="agreement-link">《隐私政策》</text>
						</label>
					</checkbox-group>
				</view>

				<view class="action-buttons">
					<view 
						class="register-btn" 
						@click="submitForm"
					>立即注册</view>
				</view>

				<view class="bottom-links">
					<view class="link-item" @click="goToLogin">
						<text>已有账号？</text>
						<text class="highlight">立即登录</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 性别选择 Picker -->
		<picker 
			mode="selector" 
			:range="sexOptions" 
			@change="handleSexChange" 
			:value="sexIndex">
			<view class="picker-placeholder" v-if="!model.userInfo.sex">
				请选择性别
			</view>
			<view v-else>
				{{model.userInfo.sex}}
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSex: false,
				sexIndex: -1,
				sexOptions: ['男', '女', '保密'],
				isVerificationCodeSent: false,
				verificationTimer: null,
				verificationCountdown: 60,
				isAgreed: false,
				model: {
					userInfo: {
						name: '',
						sex: '',
						age: 25,
						phone: '',
						verificationCode: '',
						password: '',
						confirmPassword: ''
					}
				},
				userAvatars: [
					'https://img.51miz.com/Element/00/88/00/00/971947c0_E880000_7c0f0c0c.png',
					'https://img.51miz.com/Element/00/88/00/00/971947c0_E880000_7c0f0c0c.png',
					'https://img.51miz.com/Element/00/88/00/00/971947c0_E880000_7c0f0c0c.png',
					'https://img.51miz.com/Element/00/88/00/00/971947c0_E880000_7c0f0c0c.png'
				]
			}
		},
		methods: {
			submitForm() {
				if(!this.model.userInfo.name || !this.model.userInfo.sex || !this.model.userInfo.age || 
				   !this.model.userInfo.phone || !this.model.userInfo.verificationCode || 
				   !this.model.userInfo.password || !this.model.userInfo.confirmPassword) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				if(!this.isAgreed) {
					uni.showToast({
						title: '请同意用户协议',
						icon: 'none'
					})
					return
				}
				if(this.model.userInfo.password !== this.model.userInfo.confirmPassword) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return
				}
				uni.switchTab({
					url: '../index/index'
				})
			},
			sendVerificationCode() {
				if(this.isVerificationCodeSent) return
				if(!this.model.userInfo.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				this.isVerificationCodeSent = true
				this.verificationCountdown = 60
				this.verificationTimer = setInterval(() => {
					if(this.verificationCountdown > 0) {
						this.verificationCountdown--
					} else {
						this.isVerificationCodeSent = false
						clearInterval(this.verificationTimer)
					}
				}, 1000)
			},
			handleAgreementChange(e) {
				this.isAgreed = e.detail.value.length > 0
			},
			handleWechatLogin(e) {
				if (e.detail.userInfo) {
					console.log('用户信息：', e.detail.userInfo)
					} else {
					uni.showToast({
						title: '请授权用户信息',
						icon: 'none'
					})
				}
			},
			goToLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			handleSexChange(e) {
				const index = e.detail.value;
				this.sexIndex = index;
				this.model.userInfo.sex = this.sexOptions[index];
			},
			incrementAge() {
				this.model.userInfo.age++
			},
			decrementAge() {
				if (this.model.userInfo.age > 0) {
					this.model.userInfo.age--
				}
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style>
	.page-container {
		min-height: 100vh;
		position: relative;
		background: #f8f9fa;
		overflow: hidden;
	}

	.bg-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.bg-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bg-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%);
	}

	.content {
		position: relative;
		z-index: 2;
		padding: 2vh 4vw;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-y: auto;
	}

	.header {
		margin-bottom: 2vh;
		padding: 1vh 0;
	}

	.header-content {
		text-align: center;
		margin-bottom: 1vh;
	}

	.title {
		font-size: calc(32rpx + 2vw);
		font-weight: 600;
		margin-bottom: 0.6vh;
		background: linear-gradient(45deg, #ff69b4, #ff1493);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		text-shadow: 0 2rpx 4rpx rgba(255,105,180,0.1);
	}

	.subtitle {
		font-size: calc(20rpx + 0.4vw);
		color: #666;
		letter-spacing: 2rpx;
	}

	.header-decoration {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 12rpx;
	}

	.decoration-circle {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background: #ff69b4;
	}

	.decoration-line {
		width: 40rpx;
		height: 2rpx;
		background: linear-gradient(90deg, transparent, #ff69b4, transparent);
		margin: 0 16rpx;
	}

	.form-section {
		background: rgba(255, 255, 255, 0.98);
		border-radius: 24rpx;
		padding: 3vh 4vw;
		box-shadow: 0 12rpx 36rpx rgba(255,105,180,0.15);
		backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255,255,255,0.9);
		width: 100%;
		box-sizing: border-box;
		animation: fadeIn 1s ease 0.3s both;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.form-title {
		text-align: center;
		margin-bottom: 3vh;
		padding: 1vh 0;
	}

	.title-text {
		font-size: calc(28rpx + 0.4vw);
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 0.4vh;
		letter-spacing: 2rpx;
	}

	.title-desc {
		font-size: calc(20rpx + 0.3vw);
		color: #999;
		letter-spacing: 1rpx;
	}

	.input-group {
		margin-bottom: 2vh;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		overflow-y: auto;
	}

	.input-wrapper {
		margin-bottom: 1.8vh;
		width: 100%;
		box-sizing: border-box;
	  display: flex;
	  align-items: center;
	}
	
	.input-label {
		font-size: calc(24rpx + 0.2vw);
		color: #333;
		font-weight: 500;
		margin-right: 2.5vw;
		white-space: nowrap;
		min-width: 90rpx;
		letter-spacing: 1rpx;
	}

	.input-content {
		flex: 1;
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 1.2vh 2vw;
		border: 2rpx solid rgba(255,105,180,0.15);
		transition: all 0.3s ease;
	}

	.input-content:focus-within {
		border-color: #ff69b4;
		box-shadow: 0 6rpx 16rpx rgba(255,105,180,0.15);
		background: #fff;
		transform: translateY(-1rpx);
	}

	.custom-input {
		flex: 1;
		font-size: calc(24rpx + 0.2vw);
		color: #333;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	}

	.custom-input::placeholder {
		color: #999;
		font-size: calc(22rpx + 0.2vw);
		font-weight: 300;
	}

	.input-value {
		flex: 1;
		font-size: 26rpx;
		color: #333;
	}

	.input-value.placeholder {
		color: #999;
	}

	.arrow-icon {
		color: #999;
		font-size: 24rpx;
		margin-left: 8rpx;
		transform: rotate(90deg);
	}

	.age-container {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 12rpx 20rpx;
		border: 2rpx solid rgba(255,105,180,0.15);
	}

	.age-btn {
		width: 48rpx;
		height: 48rpx;
		min-height: 48rpx !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: #ff69b4 !important;
		border-radius: 50% !important;
		color: #ffffff !important;
		font-size: 32rpx !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		border: none !important;
	}

	.age-btn::after {
		border: none !important;
	}

	.age-input {
		width: 80rpx;
		height: 48rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		background: transparent;
		margin: 0 20rpx;
		padding: 0;
	}

	.verification-wrapper .input-content {
		padding: 0;
	}

	.verification-btn {
		padding: 1.2vh 2vw;
		font-size: calc(22rpx + 0.2vw);
		color: #ff69b4;
		background: rgba(255,105,180,0.1);
		border-radius: 0 12rpx 12rpx 0;
		border: none;
		white-space: nowrap;
		transition: all 0.3s ease;
		font-weight: 500;
	}

	.verification-btn.disabled {
		color: #999;
		background: #f0f0f0;
	}

	.agreement {
		margin: 2vh 0;
		padding: 0 12rpx;
	}

	.checkbox-label {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666;
		letter-spacing: 1rpx;
	}

	.agreement-text {
		font-weight: 300;
	}

	.agreement-link {
		color: #ff69b4;
		font-weight: 500;
	}

	.action-buttons {
		margin-top: 2vh;
		padding: 1vh 0;
	}

	.register-btn {
		width: 100%;
		height: 88rpx;
		background: #ff69b4;
		font-size: 30rpx;
		font-weight: 600;
		letter-spacing: 6rpx;
		border-radius: 44rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.register-btn:active {
		opacity: 0.9;
	}

	.bottom-links {
		margin-top: 2vh;
		text-align: center;
		padding: 1vh 0;
	}

	.link-item {
		display: inline-flex;
		align-items: center;
		gap: 8rpx;
		font-size: 24rpx;
		color: #666;
		letter-spacing: 1rpx;
	}

	.highlight {
		color: #ff69b4;
		font-weight: 500;
	}

	@media screen and (max-width: 320px) {
		.content {
			padding: 1.5vh 3vw;
		}
		
		.form-section {
			padding: 2vh 3vw;
		}

		.input-label {
			font-size: 22rpx;
			margin-right: 2vw;
			min-width: 80rpx;
		}
		
		.input-content {
			padding: 1vh 1.5vw;
		}
		
		.verification-btn {
			padding: 1vh 1.5vw;
		}
	}

	@media screen and (min-width: 768px) {
		.content {
			max-width: 600px;
			margin: 0 auto;
		}

		.form-section {
			padding: 4vh 5vw;
		}

		.input-group {
			max-width: 500px;
			margin: 0 auto 2vh;
		}

		.action-buttons {
			max-width: 500px;
			margin: 2vh auto 0;
		}
	}

	.picker-placeholder {
		color: #999;
		font-size: 26rpx;
	}
</style>